<template>
  <div class="line-chart" ref="lineChartRef">LineChart</div>
</template>

<script lang="ts">
export default {
  name: 'LineChart',
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const lineChartRef = ref()
//必须在onMounted中完成，此时才会有DOM元素
onMounted(() => {
  const myEchart = echarts.init(lineChartRef.value)
  const option = {
    xAxis: {
      data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ],
      show: false, //不显示
      boundaryGap: false, //
    },
    yAxis: {
      show: false,
    },
    series: {
      type: 'line',
      data: [25, 20, 29, 18, 23, 24, 20, 28, 17, 23, 29, 14],
      itemStyle: {
        //隐藏拐点
        opacity: 0,
      },
      smooth: true, //是否曲线显示
      areaStyle: {
        // 区域样式的颜色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#a64ca6', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#fff', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      lineStyle: {
        // 线条的样式
        color: '#a64ca6',
      },
    },
    grid: {
      top: 10,
      bottom: 0,
      left: 0,
      right: 0,
    },
  }
  myEchart.setOption(option)
})
</script>

<style scoped>
.line-chart {
  width: 100%;
  height: 100%;
}
</style>
